<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>九九乘法表</title>
  </head>
  <body>
    <script>
      document.write("<table align = 'center'");
      for (let i = 1; i <= 9; i++) {
        document.write("<tr>");
        for (let j = 1; j <= i; j++) {
          document.write("<td>");
          document.write(i + "*" + j + "=" + i * j);
          document.write("</td>");
        }
        document.write("<br>");
        document.write("</tr>");
      }
      document.write("</table>");

      let td = document.getElementsByTagName("td");
      for (let i = 0; i < td.length; i++) {
        td[i].style.width = "80px";
        td[i].style.height = "20px";
        td[i].style.textAlign = "center";
        td[i].style.cursor = "pointer";
        td[i].style.border = "1px #6868ff solid";

        td[i].onmouseover = function () {
          td[i].style.backgroundColor = "#0000ff";
          td[i].style.color = "#fccc2d";
        };
        td[i].onmouseout = function () {
          td[i].style.color = "";
          td[i].style.backgroundColor = "";
        };
      }
    </script>
  </body>
</html>
